<template>
    <div class="sdy-home-goods-list">
    <!-- 使用 vant 内的 List 组件 -->
    <!-- 如果需要下拉刷新, 包裹该标签 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        class="goods-list-box"
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        :offset="100"
        @load="loadGoodsListHandler"
      >
        <div
          class="goods-item"
          v-for="item in goodList"
          :key="item.proid" @click="$router.push('/detail')">
          <img :src="item.img1" alt="">
          <p class="title van-multi-ellipsis--l2">
            {{ item.proname }}
          </p>
          <p class="price">
            <span class="current">
              ￥ {{ item.issale ? (item.originprice * 10 / item.discount).toFixed(2) : item.originprice.toFixed(2) }}
            </span>
            <span class="old">
              ￥ {{ item.originprice.toFixed(2) }}
            </span>
          </p>
          <p class="tags">
            <van-tag type="danger">{{ item.category }}</van-tag>
            <van-tag type="primary">{{ item.brand }}</van-tag>
          </p>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
  
<script setup lang="ts">
// 导入请求接口
import { goodListApi } from '@/api/goods'
// 导入ts 相关接口
import type { MyHotItem } from '@/config/interface';
import { ref, reactive } from 'vue'
// 准备列表控制变量
// 当你需要加载的时候, 你直接加载即可, 不需要操作该数据
// 加载数据的时候, 会自动把 loading 设置为 true
// 当你加载完毕以后, 把 loading 修改为 false 即可
const loading = ref<boolean>(false)

// 当你没有更多数据的时候, 把该数据的值变成 true, 不会再次加载了
const finished = ref<boolean>(false)

// 准备一个变量, 表示下拉刷新控制器
const refreshing = ref<boolean>(false)

// 准备一个变量，储存 商品列表数据
const goodList = ref<MyHotItem[]>([])

// 准备一个数据表示相关列表数据
const goodInfo = reactive({ count: 1, limitNum: 10 })

// 滚动到底部触发的事情
const loadGoodsListHandler = () => {
    setTimeout(async () => {
        // cons ole.log("数据需要加载");
        const res = await goodListApi(goodInfo)
        // console.log(res);
        // 注意:=不能直接替换数组，而是把本次内容与上一次的内容拼接后面
        goodList.value = [...goodList.value, ...res.data]
        // 修改一下 goodsInfo 内的count，为了下一次加载时候，变成第二页
        goodInfo.count++
        // 把加载完毕状态修改为 false
        loading.value = false
        // 如果res.data 的length为空 就不需要 loading 
        if (!res.data.length) finished.value = true
    }, Math.random() * 1000 + 2000)
}

const onRefresh = () => {
    setTimeout(async () => {
        // cons ole.log("数据需要加载");
        // 让当前页变成第一页(模拟一个 2 ~ 7 的随机数)
        // 注意: 不应该依赖前端变化, 依赖后端变化
        goodInfo.count = Math.floor(Math.random() * 5 + 2)
        const res = await goodListApi(goodInfo)
        console.log(res);
        // 本次需要完整替换
        goodList.value = res.data
        // 修改一下 goodsInfo 内的count，为了下一次加载时候，变成第二页
        goodInfo.count++
        // 让下拉刷线控制变量换成 false
        refreshing.value = false
        // 因为刷新以后可以从新加载了
        // 为了避免拉到底以后, 刷新以后没有第二页了
        finished.value = false
    }, Math.random() * 1000 + 2000)
}

</script>
  
<style scoped lang="scss">
@import '@/styles/variable.scss';
.sdy-home-goods-list {
  box-sizing: border-box;
  padding: 0 15px;

  .goods-list-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    .goods-item {
      width: 45%;
      border: 1px solid #333;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
      overflow: hidden;
      padding-bottom: 5px;

      > p {
        margin: 0;
      }

      > img {
        width: 100%;
        height: 170px;
        display: block;
      }

      > .title {
        font-size: 12px;
      }

      > .price {
        font-size: 12px;
        color: #ccc;
        width: 100%;
        display: flex;
        justify-content: space-evenly;

        > .current {
          font-size: 16px;
          color: $globalColor;
        }

        > .old {
          text-decoration: line-through;
        }
      }
      > .tags {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
      }
    }
  }
}
</style>
